<template>
	<view>
		<view class="head">
			<uni-file-picker ref="imageUpload" @select="select" limit="1" fileMediatype="image" v-model="imageValue"
				file-extname="png,jpg" :image-styles="imageStyles" return-type="object">
				<view class="takephoto">
					<image v-if="FormData.photo" :src="imgUrl + FormData.photo" mode="widthFix"></image>
					<image v-else src="https://staticfile-yj.obs.myhuaweicloud.com/%E5%A4%B4%E5%83%8F.png"
						mode="widthFix">
					</image>
					<view>选择头像</view>
				</view>
			</uni-file-picker>
		</view>
		<view class="form">
			<uni-forms ref="valiForm" :model="FormData" labelWidth="160rpx">
				<uni-forms-item label="用户ID"><text
						style="line-height: 36px;">{{FormData.accountId}}</text></uni-forms-item>
				<uni-forms-item label="昵称">
					<uni-easyinput :inputBorder="false" v-model="FormData.nickName"
						:placeholder="FormData.nickName?FormData.nickName:'暂无昵称'">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="性别">
					<uni-data-checkbox v-model="FormData.sex" :localdata="sexs" />
				</uni-forms-item>
				<uni-forms-item label="生日">
					<picker mode="date" v-model="FormData.birthday" :start="startDate" :end="endDate"
						@change="bindDateChange">
						<view class="uni-input">{{FormData.birthday?FormData.birthday:'请选择'}}</view>
					</picker>
				</uni-forms-item>
				<uni-forms-item label="城市">
					<text @click="reginPopup()"
						style="font-size: 12px; color: gray; line-height: 16px;">{{FormData.extend.regionName == ''||null? '选择地区':FormData.extend.regionName}}</text>
				</uni-forms-item>
				<uni-forms-item label="职业">
					<uni-easyinput :inputBorder='false' v-model="FormData.career"
						:placeholder="FormData.career?FormData.career:'请输入职业'" />
				</uni-forms-item>
				<uni-forms-item label="个性签名">
					<uni-easyinput :inputBorder='false' v-model="FormData.signature"
						:placeholder="FormData.signature?FormData.signature:'请输入个性签名'" />
				</uni-forms-item>
				<view class="attention">
					<view class="title">关注的服务内容</view>
					<view class="catgory">
						<view class="label" v-for="(item,index) in catgoryName" :key="index"><text>{{item.catgoryName}}</text><uni-icons @click="remove(item.catgory,index)" type="closeempty" size="12" color="#00B5DD" style="margin-left: 12rpx;"></uni-icons></view>
						<uni-data-picker v-slot:default="{data, error, options}" @change="onchange" popup-title="请选择分类"
							:localdata="typeList" :map="props" v-model="data">
							<view v-if="error" class="error">
								<text>{{error}}</text>
							</view>
							<view v-else-if="data.length" class="selected">
								<!-- <view v-for="(item,index) in data" :key="index" class="selected-item">
							      <text>{{item}}</text>
							    </view> -->
								<text class="addcatgory">+</text>
							</view>
							<!-- <view v-if="data.length" class="selected">
								<text class="addcatgory" @click="showCatgory()">+</text>
							</view> -->
							<view v-else>
								<text><text class="addcatgory">+</text></text>
							</view>
						</uni-data-picker>
					</view>
					<!-- <text class="label">水产养殖</text><text class="label">水产养殖</text><text class="label">水产养殖</text><text class="label">水产养殖</text> -->
				</view>
				<button class="customer-btn" @click="Submit(FormData)">提交</button>
			</uni-forms>
		</view>
		<uni-popup ref="reginPopup" :safe-area='true'>
			<regionalComponents ref="region" @cancel="cancel" @sure="sure" />
		</uni-popup>
	</view>
</template>

<script>
	import {
		baseurl,
		updateCurrentAccount,
		uploadFile,
		queryCurrentAccount,
		queryDictDataTree,
	} from "@/api/user.js"
	let imgUrl = baseurl + "/nb-as/1.0.1/FileService/previewFile?fileId="
	export default {
		data() {
			let myDate = new Date()
			let endDate = myDate.toLocaleDateString()
			return {
				FormData: {
					photo:'',
					accountId:'',
					nickName:'',
					sex:'',
					birthday:'',
					career:'',
					signature:'',
					extend:{
						regionName:''
					}
				},
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}],
				imageValue:{},
				imgUrl,
				imageStyles: {
					width: 100,
					height: 100,
					border: {
						color: "#fff",
						width: 1,
						style: 'solid',
						radius: '2px'
					}
				},
				typeList: [],
				props: {
					text: 'name',
					value: 'code'
				},
				data: [],
				catgoryName: [],
				startDate:'1900-01-01',
				endDate,
			};
		},
		onReady() {
			this.queryCurrentAccount({});	
			this.$nextTick(()=>{
				//this.$refs.region.getScreen();								
				this.queryDictDataTree({
					"dictType": 'SERVICE_CATGORY'
				})
			})
		},
		onShow() {
			
		},
		onLoad() {
			
		},
		onPullDownRefresh() {
			this.queryCurrentAccount({});
			this.$refs.region.getScreen();
			this.queryDictDataTree({
				"dictType": 'SERVICE_CATGORY'
			})
			uni.stopPullDownRefresh();
		},
		methods: {
			async queryCurrentAccount(options) {
				const res = await queryCurrentAccount(options);
				this.FormData = res.returnObj;
				this.catgoryName = []
				if (this.FormData.birthday) {
					this.FormData.birthday = this.FormData.birthday.split(" ")[0]
				}
				if(!this.FormData.catgoryList){
					this.$set(this.FormData,"catgoryList",[])
				}
				if(this.FormData.extend.catgoryList.length){
					this.FormData.extend.catgoryList.forEach(el=>{
						this.catgoryName.push(el)
						this.FormData.catgoryList.push(el.catgory)
					})
				}
			},
			async uploadFile(options) {
				const res = await uploadFile(options);
				console.log('uploadFileRes', res);
				this.FormData.photo = res.returnObj
			},

			async updateCurrentAccount(options) {
				const res = await updateCurrentAccount(options);
				if (res.success) {
					uni.showToast({
						title: '修改成功！'
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/mine/mine'
						})
					}, 500)
				}
			},

			async queryDictDataTree(options) {
				const res = await queryDictDataTree(options);
				let temp = JSON.stringify(res.returnObj);
				//temp = temp.replaceAll("subDictDataList", "children")
				temp = temp.replace(/subDictDataList/g,"children")
				this.typeList = JSON.parse(temp)
			},

			select(e) {
				console.log(e)
				const tempFilePaths = e.tempFilePaths;
				//获取图片临时路径
				const imgUrl = tempFilePaths[0];
				const name = e.tempFiles[0].name;
				this.uploadFile(imgUrl);
			},
			bindDateChange: function(e) {
				this.FormData.birthday = e.detail.value
			},
			reginPopup() {
				this.$refs.reginPopup.open('bottom');
				this.regionaStatus = true;
			},
			cancel() {
				this.$refs.reginPopup.close('bottom');
			},
			sure(data) {
				this.$refs.reginPopup.close('bottom');
				console.log(data);
				let map = '';
				let i = 0;
				data.forEach((item, index) => {
					console.log('data', item);
					if (item?.regionName != '请选择') {
						if (map != '') {
							map = map + '/' + item.regionName
						} else {
							map = item.regionName
						}
					} else {
						i++
						if (i < 2) {
							if (index > 0) {
								index--
								this.FormData.region = data[index]['regionId']
							} else {
								this.FormData.region = ''
							}
						}
					}
				});
				this.FormData.extend.regionName = map;
				/* let selectIndex = 0
				for (let i = 0; i < data.length; i++) {
					if (data[i].regionName == '请选择') {
						if (i == 0) {
							selectIndex = -1;
							break
						}else{
							selectIndex = i - 1;
							break;
						}	
					} else {
						selectIndex = i
					}
				}
				if(selectIndex != -1){
					this.FormData.region = data[selectIndex].regionName
				}else{
					this.FormData.region = '';
				} */
			},
			Submit(form) {
				console.log(form)
				this.$set(form, '')
				this.updateCurrentAccount(form)
			},
			onnodeclick(e) {
				console.log(e);
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e, this.data);
				let obj = {
					catgoryName:'',
					catgory:this.data
				}
				let temparr = []
				e.detail.value.forEach(el=>{
					temparr.push(el.text)
				})
				obj.catgoryName = temparr.join('/')
				if (this.FormData.catgoryList.indexOf(this.data) == -1) {
					this.catgoryName.push(obj)
					this.FormData.catgoryList.push(this.data)
				}
			},
			remove(key,index){
				let i = this.FormData.catgoryList.indexOf(key)
				this.FormData.catgoryList.splice(i, 1);
				this.catgoryName.splice(index,1)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.head {
		padding: 30rpx;

		.uni-file-picker__container {
			justify-content: center;
		}
	}



	.head image {
		width: 60px;
		height: 60px;
	}

	.head text {
		font-size: 28rpx;
		color: #283241;
	}

	.attention {

		.title {
			font-size: 28rpx;
			line-height: 22px;
			color: #646A74;
		}

		.label {
			display: inline-block;
			font-size: 24rpx;
			padding: 2px 8px;
			color: #00B5DD;
			background-color: #EBF9FC;
			border-radius: 4px;
			margin: 10px 10px 10px 0;
			white-space: nowrap;
		}
	}

	.customer-btn {
		background-color: #00B5DD !important;
		color: #fff;
		border-radius: 8px;
		height: 44px;
		line-height: 44px;
		font-size: 32rpx;
		font-weight: 500;
		margin-top: 20px;
	}

	.addcatgory {
		display: inline-block;
		border: 1px solid #00B5DD;
		height: 30px;
		width: 30px;
		line-height: 25px;
		text-align: center;
		color: #00B5DD;
		font-size: 30px;
	}
</style>